<!-- 菜单管理 -->
<template>
    <div class="menu-box">
        <!-- 查询 -->
        <el-form :inline="true" ref="menuRuleFormRef" :model="menuRuleForm" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model.trim="menuRuleForm.menuName" placeholder="请选择菜单名称" />
            </el-form-item>
            <el-form-item label="菜单状态" prop="menuState">
                <el-select v-model="menuRuleForm.menuState" placeholder="请选择菜单状态">
                    <el-option :label="itme.label" :value="itme.value" v-for="(itme, index) in options" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="userSubmitForm(menuRuleFormRef)">查询</el-button>
                <el-button @click="resetForm(menuRuleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 主体 -->
        <div class="table-but mb-5 mt-5">
            <el-button type="primary" @click="menuCreate" v-has="'menu-add'">创建</el-button>
        </div>
        <!-- 表格数据 -->
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" row-key="_id"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <!-- 表格标题 -->
                <el-table-column :label="item.label" :prop="item.property" v-for="(item, index) in columns"
                    :formatter="item.formatter" :key="index" :width="item.width" />
                <el-table-column align="center" label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handleAdd(scope.row)"
                            v-has="'menu-add'">新增</el-button>
                        <el-button size="small" @click="handleEdit(scope.row)" v-has="'menu-edit'">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)"
                            v-has="'menu-delete'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 对话框 -->
            <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" draggable @close="dialogClose">
                <div>
                    <el-form ref="DialogRuleFormRef" :model="DialogRuleForm" :rules="rules" label-width="120px"
                        class="demo-ruleForm" :size="formSize" status-icon>
                        <el-form-item label="父级菜单" prop="parentId">
                            <el-cascader :options="options2" :props="props1" clearable
                                v-model="DialogRuleForm.parentId" />
                            <span>不写则默认一级菜单</span>
                        </el-form-item>
                        <el-form-item label="菜单类型" prop="menuType">
                            <el-radio-group v-model="DialogRuleForm.menuType">
                                <el-radio :label="1">菜单</el-radio>
                                <el-radio :label="2">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="菜单名称" prop="menuName">
                            <el-input v-model="DialogRuleForm.menuName" placeholder="请输入菜单名称" />
                        </el-form-item>
                        <el-form-item label="菜单图标" prop="icon" v-if="DialogRuleForm.menuType == 1">
                            <el-input v-model="DialogRuleForm.icon" placeholder="请输入菜单图标" />
                        </el-form-item>
                        <el-form-item label="路由地址" prop="path" v-if="DialogRuleForm.menuType == 1">
                            <el-input v-model="DialogRuleForm.path" placeholder="请输入路由地址" />
                        </el-form-item>
                        <el-form-item label="组件路径" prop="component" v-if="DialogRuleForm.menuType == 1">
                            <el-input v-model="DialogRuleForm.component" placeholder="请输入组件路径" />
                        </el-form-item>
                        <el-form-item label="权限标识" prop="menuCode" v-if="DialogRuleForm.menuType == 2">
                            <el-input v-model="DialogRuleForm.menuCode" placeholder="请输入权限标识" />
                        </el-form-item>
                        <el-form-item label="菜单类型" prop="menuState">
                            <el-radio-group v-model="DialogRuleForm.menuState">
                                <el-radio :label="0">正常</el-radio>
                                <el-radio :label="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>

                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="DialogSubmitForm(DialogRuleFormRef)">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, nextTick, reactive, ref, computed } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../../api'

onMounted(() => {
    getmenulistapi()//获取左侧导航栏数据
})
// 获取到左侧导航栏的数据
const getmenulistapi = (obj?: any) => {
    api.getMenuListApi(obj).then((res) => {
        tableData.value = res
        options2.value = res//设置对话框中的父级菜单(级联选择器)
        console.log(tableData.value);
        
    })
}


// 头部查询
const formSize = ref('default')//用于控制该表单内组件的尺寸
const menuRuleFormRef = ref<FormInstance>()//获取ref节点
// 查询的数据
const menuRuleForm = reactive({
    menuName: '',
    menuState: 0
})
// 菜单状态列表
const options = ref([
    { label: '正常', value: 0 },
    { label: '停用', value: 1 },
])
//查询按钮
const userSubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            getmenulistapi(menuRuleForm)//获取左侧导航栏数据
        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}



// 表格操作按钮(对话框)
const dialogVisible = ref(false)//对话框开关
const active = ref('create')//判断对话框是添加还是编辑
//对话框动态title
const dialogTitle = computed(() => {
    if (active.value == 'create') {
        return '创建'
    }
    if (active.value == 'add') {
        return '新增'
    }
    if (active.value == 'edit') {
        return '编辑'
    }
})
const DialogRuleFormRef = ref<FormInstance>()//获取ref节点
// 提交表单数据
const DialogRuleForm: any = reactive({
    parentId: [null],
    menuType: 0,
    menuName: '',
    icon: '',
    path: '',
    component: '',
    menuCode: '',
    menuState: '',
})



// 对话框表单验证
const rules = reactive({
    menuName: [
        {
            required: true,//是否必填
            message: '请输入菜单名称',//提示信息
            trigger: 'blur',//失去焦点时触发验证
        }
    ],
})
// 父级菜单(级联选择器)
const props1 = {
    checkStrictly: true,
    label: 'menuName',
    value: '_id'
}
// 父级菜单(级联选择器)
const options2: any = ref()
// 确定按钮(创建/新增/编辑)
const DialogSubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let params: any = DialogRuleForm
            //判断是新增还是编辑
            params.active = active.value
            //调用新增/编辑用户接口
            api.getMenuOperateApi(params).then((res: any) => {
                if (res) {
                    ElMessage({
                        message: '创建成功',
                        type: 'success',
                    })
                    getmenulistapi()//刷新表格数据
                    //关闭对话框
                    dialogVisible.value = false
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 对话框关闭回调
const dialogClose = () => {
    //重置表单数据
    resetForm(DialogRuleFormRef.value)
}




//创建菜单
const menuCreate = () => {
    active.value = 'create'//创建状态
    dialogVisible.value = true//开启对话框
}




// 主体表格
const tableData: any = ref([])// 表单数据
// 表格标题
const columns = [
    {
        label: '菜单名称',
        property: 'menuName',
        width: '180px'
    },
    {
        label: '图标',
        property: 'icon',
        width: '150px'
    },
    {
        label: '菜单类型',
        property: 'menuType',
        formatter: function (_row: any, _column: any, cellValue: string | number, _index: any) {
            let obj: Itable = {
                1: '菜单',
                2: '按钮',
            }
            return obj[cellValue]
        }
    },
    {
        label: '权限标识',
        property: 'menuCode',
    },
    {
        label: '路由地址',
        property: 'path',
    },
    {
        label: '组件路径',
        property: 'component',
    },
    {
        label: '菜单状态',
        property: 'menuState',
        formatter: function (_row: any, _column: any, cellValue: string | number, _index: any) {
            let obj: Itable = {
                0: '正常',
                1: '停用',
            }
            return obj[cellValue]
        }
    },
    {
        label: '注册时间',
        property: 'createTime',
        width: '180px'
    }
]
// 新增
const handleAdd = (row: User) => {
    active.value = 'add'//新增状态
    DialogRuleForm.parentId = row._id
    dialogVisible.value = true//开启对话框
}
// 单个编辑
const handleEdit = (row: User) => {
    active.value = 'edit'//编辑状态
    nextTick(() => {    //nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。(重置表单数据)
        Object.assign(DialogRuleForm, row)//将当前行的数据赋值给表单    Object.assign()合并/覆盖对象
        dialogVisible.value = true//开启对话框
    })
}
// 单个删除
const handleDelete = (row: User) => {
    console.log(row);
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
            draggable: true,//属性为true以做到拖拽
        }
    )
        .then(() => {
            // 调用删除菜单接口
            api.getMenuDeleteApi({ _id: row._id })
            getmenulistapi()//刷新表格数据
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}




</script>

<style scoped lang="less">
.el-select {
    width: 200px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>